<template>
    <div class="editor-box">
           <div class="editor-controller">
                        <h3>内容添加</h3>
                         <div>
                            <p>标题导航</p>
                        </div>
                        <div @click="addpageInfo('goods')">
                            <p>商品</p>
                        </div>
                        <div @click="addpageInfo('goodslist')">
                            <p>商品列表</p>
                        </div>
                         <div  @click="addpageInfo('division')">
                            <p>导航</p>
                        </div>
                         <div @click="addpageInfo('ad')">
                            <p >广告</p>
                        </div>
                        <div  @click="addpageInfo('notice')">
                            <p>公告</p>
                        </div>
                        <div @click="addpageInfo('line')">
                            <p>分割线</p>
                        </div>
                </div>
            <div class="editor-lbox">
                <h1>未分类</h1>
                <div class="editor-content">
                    <template v-for="iten in pageInfo">
                            <!-- 广告 轮播图 -->
                            <div v-if="iten.type=='ad'">
                                <the-ad :data="iten.data" @queryTop="queryTop" @on-contro="adcontro"></the-ad>
                            </div>

                            <div v-if="iten.type=='article'">
                                <the-article ></the-article>
                            </div>
                            <div v-if="iten.type=='articlelist'">
                                <the-articlelist></the-articlelist>
                            </div>
                            <div v-if="iten.type=='goods'">
                                <the-goods :data="iten.data"  @queryTop="queryTop"  @on-contro="adcontro"/>
                            </div>
                            <div v-if="iten.type=='goodslist'">
                                <TheGoodslist :data="iten.data"  @queryTop="queryTop"  @on-contro="adcontro"/>
                            </div>
                            <!-- 公告 -->
                             <div v-if="iten.type=='notice'">
                                <the-notice  :data="iten.data"  @queryTop="queryTop"  @on-contro="adcontro"></the-notice>
                            </div>
                            <!-- 分割线 -->
                             <div v-if="iten.type=='line'">
                                <the-line :data="iten.data"  @queryTop="queryTop"  @on-contro="adcontro" />
                            </div>
                            <div v-if="iten.type=='division'">
                                <the-division :data="iten.data"  @queryTop="queryTop"  @on-contro="adcontro"></the-division>
                            </div>
                          
                    </template>
                </div>
             
            </div>
            <div class="editor-rbox">
                <!-- 修改标题 -->
                    <template v-for="iten in pageInfo">
                            <div :style="{top:rtop}" v-if="iten.type=='ad'&&iten.data.active">
                                <the-ad-con :data="iten.data"  @on-change="adconchange"/>
                            </div>
                             <div :style="{top:rtop}" v-if="iten.type=='notice'&&iten.data.active">
                                <the-notice-con :data="iten.data"  @on-change="noticechange"/>
                            </div>
                             <div :style="{top:rtop}" v-if="iten.type=='line'&&iten.data.active">
                                <the-notice-con :data="iten.data"  @on-change="noticechange"/>
                            </div>
                             <div :style="{top:rtop}" v-if="iten.type=='division'&&iten.data.active">
                                  <TheDivCon  :data="iten.data"  @on-change="divConchange"/>
                            </div>
                             <div :style="{top:rtop}" v-if="iten.type=='goods'&&iten.data.active">
                                  <TheGoodsCon  :data="iten.data"  @on-change="goodsConchange"/>
                            </div>
                            
                           
                    </template>

            </div>
        <div class="page-bottom">
                    <div >
                       <Button type="success" @click="baocun" long>保存</Button>
                    </div>
        </div>


    </div>
</template>
<script>
import TheAd from "@/components/ad"
import TheArticle from "@/components/article"
import TheArticlelist from "@/components/articlelist"
import TheGoods from "@/components/goods"
import TheGoodslist from "@/components/goodslist"
import TheNine from "@/components/nine"
import TheNotice from "@/components/notice"
import TheLine from "@/components/line"
import TheDivision from "@/components/division"
import TheTitle from "@/components/title"
import TheAdCon from "@/components/AdCon"
import addInfo from "../api/addpageInfo"
import TheNoticeCon from "@/components/NoticeCon"
import TheDivCon from "@/components/divCon"
import TheGoodsCon from "@/components/goodsCon"


export default {
    data(){
        return{
            rtop:"30px",
            selfindex:0,
            pageInfo:[],
            msg:"hello world"
        }
    },
    methods:{
        baocun(){
            console.log(this.pageInfo)
        },
        //控制器 控制组件删除 调换位置功能
        adcontro(e){
            console.log(e)
            if(e.type==3){
                //删除操作。
                this.$Modal.confirm({
                    title: '是否确定删除',
                    onOk: () => {
                      this.pageInfo.splice(e.index,1);
                        this.pageInfo.forEach((val,index)=>{
                            val.data.selfindex = index;
                        })
                    },
                    
                });
                return
            }else if(e.type==1){
                //向上挪下 待完成
                    if(e.index>0){
                          this.pageInfo.splice(e.index-1,0,this.pageInfo.splice(e.index,1)[0])
                          
                    }

            }else if(e.type==2){
                //向下挪下 待完成

                 if(e.index<this.pageInfo.length){
                          this.pageInfo.splice(e.index+1,0,this.pageInfo.splice(e.index,1)[0])
                    }

            }
            this.pageInfo.forEach((val,index)=>{
                          val.data.selfindex = index;
                    })
        },
        goodsConchange(e){
            if(e.goods){
              this.pageInfo[e.index].data.datalist=this.pageInfo[e.index].data.datalist.concat(e.goods)
                console.log(e)
            }

        },
        //导航组件返回值
        divConchange(e){
           this.pageInfo[e.selfindex].data.datalist[e.index][e.targets] = e.classname
        },
        //公告组件返回值
        noticechange(e){
           this.pageInfo[e.index].data.title=e.title
        },
        queryTop(e){
                  console.log(e)
                this.selfindex=e.selfindex
                e.offsetTop+=20
                this.rtop =20+"px"
                this.pageInfo.forEach(val=>{
                    val.data.active =false
                })
          this.pageInfo[e.selfindex].data.active =true
        },
        adconchange(e){
            if(e.url){
                var index = this.pageInfo[e.index].data.datalist.length;
                this.pageInfo[e.index].data.datalist.push({
                        index:index,
                        url:e.url,
                        title:"",
                        link:"1"
                })

            }else if(e.title){
                 this.pageInfo[this.selfindex].data.datalist[e.index].title = e.title
            }
           
            
            console.log(this.pageInfo )
        },
        addpageInfo(e){
                var data ={
                    that:this,
                    data:e
                }
               
                addInfo.addInfo(data)
        },
    },
    components:{
        TheAd,
        TheArticle,
        TheArticlelist,
        TheGoods,
        TheGoodslist,
        TheNine,
        TheAdCon,
        TheNotice,TheGoodsCon,
        TheDivCon,
        TheLine,
        TheNoticeCon,
        TheDivision,
        TheTitle
    }
}
</script>
